<template>
    <el-container style="height: 100vh; ">
    <!-- 左侧固定区域 -->
    <el-aside width="150px" style="overflow: hidden;">
      <MainSidebar />
    </el-aside>

    <!-- 主容器 -->
    <el-container>
      <!-- 右上固定区域 -->
      <el-header style="height: 60px;">
        <MainNavbar />
      </el-header>

      <!-- 右下内容区域 -->
      <el-main style="flex: 1; overflow: auto; padding:0">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MainSidebar from "@/views/main-sidebar";
import MainNavbar from "@/views/main-navbar";

export default {
   name: "Main",
    components:{
      MainSidebar,
      MainNavbar
    }
}
</script>
<style>
/* 确保整个页面占满浏览器窗口 */
html, body {
  background-color: #f0f0f0;
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-dialog {
  border-radius: 30px; /* 设置全局圆角 */
  overflow: hidden;
}

#app {
  height: 100%;
}
</style>